<template>
  <view class="tags-management-page">
    <!-- 头部 -->
    <view class="header">
      <text class="back-btn" @tap="navigateBack">&lt;</text>
      <text class="title">标签管理</text>
      <view class="placeholder"></view>
    </view>

    <!-- 主内容区域 -->
    <scroll-view class="content" scroll-y="true">
      <!-- 标签搜索 -->
      <view class="tags-search">
        <view class="search-input-wrapper">
          <text class="search-icon">🔍</text>
          <input 
            class="search-input" 
            placeholder="搜索标签..." 
            v-model="searchKeyword"
            @input="searchTags"
          />
          <text class="clear-search" v-if="searchKeyword" @tap="clearSearch">×</text>
        </view>
      </view>

      <!-- 标签统计信息 -->
      <view class="tags-stats">
        <text class="stats-text">共 {{ filteredTags.length }} 个标签</text>
        <text class="sort-btn" @tap="toggleSortOrder">
          {{ sortOrder === 'asc' ? '↑ 按名称排序' : '↓ 按名称排序' }}
        </text>
      </view>

      <!-- 标签列表（支持拖拽排序） -->
      <view class="tags-list">
        <view 
          v-for="(tag, index) in filteredTags" 
          :key="tag.name"
          class="tag-item"
          @touchstart="startDrag(index)"
          @touchmove="onDragMove"
          @touchend="endDrag"
          :class="{ 'dragging': draggingIndex === index }"
        >
          <!-- 拖拽手柄 -->
          <view class="drag-handle">⋮⋮</view>
          
          <!-- 标签信息 -->
          <view class="tag-info">
            <text class="tag-name">{{ tag.name }}</text>
            <text class="tag-count">({{ getTagItemCount(tag.name) }} 项)</text>
          </view>
          
          <!-- 标签操作按钮 -->
          <view class="tag-actions">
            <text class="edit-btn" @tap="editTag(tag.name)">编辑</text>
            <text class="delete-btn" @tap="deleteTag(tag.name)">删除</text>
          </view>
        </view>
      </view>

      <!-- 添加新标签 -->
      <view class="add-tag-section">
        <text class="section-title">添加新标签</text>
        <view class="add-form">
          <input 
            class="tag-input" 
            placeholder="请输入标签名称"
            v-model="newTagName"
            @confirm="addTag"
          />
          <button class="add-btn" @tap="addTag">添加标签</button>
        </view>
      </view>

      <!-- 按标签查看内容 -->
      <view class="tag-contents-section" v-if="selectedTag">
        <text class="section-title">{{ selectedTag }} 标签的内容</text>
        <view class="section-actions">
          <text class="back-btn" @tap="clearSelectedTag">返回标签列表</text>
        </view>
        
        <!-- 内容列表 -->
        <view class="contents-list">
          <view 
            v-for="(content, index) in getTagContents(selectedTag)"
            :key="index"
            class="content-item"
          >
            <text class="content-text">{{ content.content }}</text>
            <text class="content-time">{{ content.time }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'TagsManagementPage',
  data() {
    return {
      // 标签列表
      allTags: [],
      // 搜索相关
      searchKeyword: '',
      filteredTags: [],
      // 添加新标签相关
      newTagName: '',
      // 排序相关
      sortOrder: 'asc', // 'asc' 或 'desc'
      // 拖拽排序相关
      draggingIndex: -1,
      startY: 0,
      // 内容查看相关
      selectedTag: null,
      // 所有消息数据
      messages: []
    };
  },
  onLoad() {
    // 加载保存的标签和消息数据
    this.loadTags();
    this.loadMessages();
    
    // 初始化过滤后的标签列表
    this.filteredTags = this.getSortedTags();
  },
  methods: {
    // 加载标签数据
    loadTags() {
      const savedTags = uni.getStorageSync('tags');
      if (savedTags) {
        try {
          this.allTags = JSON.parse(savedTags);
        } catch (e) {
          console.error('解析标签数据失败', e);
          // 如果解析失败，使用默认标签
          this.allTags = ['Vue3', '前端', 'uni-app', '跨平台', '开发', 'JavaScript', 'CSS', 'HTML', 'React', 'Node.js'];
        }
      } else {
        // 如果没有保存的标签，使用默认标签
        this.allTags = ['Vue3', '前端', 'uni-app', '跨平台', '开发', 'JavaScript', 'CSS', 'HTML', 'React', 'Node.js'];
      }
    },
    
    // 加载消息数据
    loadMessages() {
      const savedMessages = uni.getStorageSync('messages');
      if (savedMessages) {
        try {
          this.messages = JSON.parse(savedMessages);
        } catch (e) {
          console.error('解析消息数据失败', e);
          // 如果解析失败，使用模拟数据
          this.messages = [
            {
              content: 'Vue3组合式API的使用技巧',
              time: '10:30',
              category: '学习笔记',
              categoryId: 1,
              tags: ['Vue3', '前端']
            },
            {
              content: 'uni-app跨平台开发经验总结',
              time: '昨天',
              category: '技术总结',
              categoryId: 2,
              tags: ['uni-app', '跨平台', '开发']
            }
          ];
        }
      } else {
        // 如果没有保存的消息，使用模拟数据
        this.messages = [
          {
            content: 'Vue3组合式API的使用技巧',
            time: '10:30',
            category: '学习笔记',
            categoryId: 1,
            tags: ['Vue3', '前端']
          },
          {
            content: 'uni-app跨平台开发经验总结',
            time: '昨天',
            category: '技术总结',
            categoryId: 2,
            tags: ['uni-app', '跨平台', '开发']
          }
        ];
      }
    },
    
    // 获取排序后的标签列表
    getSortedTags() {
      let tags = this.allTags.map(name => ({ name }));
      
      // 如果有搜索关键词，进行过滤
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase().trim();
        tags = tags.filter(tag => 
          tag.name.toLowerCase().includes(keyword)
        );
      }
      
      // 按名称排序
      tags.sort((a, b) => {
        const nameA = a.name.toLowerCase();
        const nameB = b.name.toLowerCase();
        return this.sortOrder === 'asc' ? nameA.localeCompare(nameB) : nameB.localeCompare(nameA);
      });
      
      return tags;
    },
    
    // 搜索标签
    searchTags() {
      this.filteredTags = this.getSortedTags();
    },
    
    // 清空搜索
    clearSearch() {
      this.searchKeyword = '';
      this.filteredTags = this.getSortedTags();
    },
    
    // 切换排序顺序
    toggleSortOrder() {
      this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
      this.filteredTags = this.getSortedTags();
    },
    
    // 添加新标签
    addTag() {
      if (!this.newTagName.trim()) {
        uni.showToast({
          title: '标签名称不能为空',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      // 检查标签是否已存在
      if (this.allTags.includes(this.newTagName.trim())) {
        uni.showToast({
          title: '该标签已存在',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      // 添加新标签
      this.allTags.push(this.newTagName.trim());
      
      // 更新过滤后的标签列表
      this.filteredTags = this.getSortedTags();
      
      // 保存到本地存储
      this.saveTags();
      
      // 清空输入框
      this.newTagName = '';
      
      // 显示提示
      uni.showToast({
        title: '标签添加成功',
        icon: 'success',
        duration: 2000
      });
    },
    
    // 编辑标签
    editTag(tag) {
      uni.showModal({
        title: '编辑标签',
        content: '请输入新的标签名称',
        editable: true,
        placeholderText: tag,
        success: res => {
          if (res.confirm && res.content.trim()) {
            // 检查新名称是否已存在
            if (this.allTags.includes(res.content.trim())) {
              uni.showToast({
                title: '该标签已存在',
                icon: 'none',
                duration: 2000
              });
              return;
            }
            
            // 更新标签名称
            const tagIndex = this.allTags.indexOf(tag);
            if (tagIndex !== -1) {
              this.allTags[tagIndex] = res.content.trim();
            }
            
            // 同时更新消息中的标签
            this.messages.forEach(message => {
              const messageTagIndex = message.tags.indexOf(tag);
              if (messageTagIndex !== -1) {
                message.tags[messageTagIndex] = res.content.trim();
              }
            });
            
            // 保存到本地存储
            this.saveTags();
            this.saveMessages();
            
            // 更新过滤后的标签列表
            this.filteredTags = this.getSortedTags();
            
            // 如果当前正在查看该标签的内容，也需要更新
            if (this.selectedTag === tag) {
              this.selectedTag = res.content.trim();
            }
            
            // 显示提示
            uni.showToast({
              title: '标签更新成功',
              icon: 'success',
              duration: 2000
            });
          }
        }
      });
    },
    
    // 删除标签
    deleteTag(tag) {
      const count = this.getTagItemCount(tag);
      
      let confirmText = '确定要删除这个标签吗？';
      if (count > 0) {
        confirmText += ` 该标签被 ${count} 项内容使用，删除后这些内容将不再包含该标签。`;
      }
      
      uni.showModal({
        title: '删除标签',
        content: confirmText,
        success: res => {
          if (res.confirm) {
            // 从标签列表中删除
            const tagIndex = this.allTags.indexOf(tag);
            if (tagIndex !== -1) {
              this.allTags.splice(tagIndex, 1);
            }
            
            // 从所有消息中移除该标签
            this.messages.forEach(message => {
              const messageTagIndex = message.tags.indexOf(tag);
              if (messageTagIndex !== -1) {
                message.tags.splice(messageTagIndex, 1);
              }
            });
            
            // 保存到本地存储
            this.saveTags();
            this.saveMessages();
            
            // 更新过滤后的标签列表
            this.filteredTags = this.getSortedTags();
            
            // 如果当前正在查看该标签的内容，返回标签列表
            if (this.selectedTag === tag) {
              this.selectedTag = null;
            }
            
            // 显示提示
            uni.showToast({
              title: '标签已删除',
              icon: 'success',
              duration: 2000
            });
          }
        }
      });
    },
    
    // 拖拽排序 - 开始拖拽
    startDrag(index) {
      this.draggingIndex = index;
      this.startY = event.touches[0].clientY;
    },
    
    // 拖拽排序 - 拖拽中
    onDragMove(event) {
      if (this.draggingIndex === -1) return;
      
      const currentY = event.touches[0].clientY;
      const diffY = currentY - this.startY;
      
      // 这里可以实现视觉上的跟随效果
      // 实际的排序在touchend时处理
    },
    
    // 拖拽排序 - 结束拖拽
    endDrag(event) {
      if (this.draggingIndex === -1) return;
      
      const endY = event.changedTouches[0].clientY;
      const diffY = endY - this.startY;
      
      // 只有当拖拽距离足够大时才触发排序
      if (Math.abs(diffY) < 20) {
        this.draggingIndex = -1;
        return;
      }
      
      // 确定目标位置
      const targetIndex = this.draggingIndex + (diffY > 0 ? 1 : -1);
      
      if (targetIndex >= 0 && targetIndex < this.filteredTags.length) {
        // 获取标签名称
        const tag1Name = this.filteredTags[this.draggingIndex].name;
        const tag2Name = this.filteredTags[targetIndex].name;
        
        // 在原始allTags数组中找到这两个标签的位置
        const originalIndex1 = this.allTags.indexOf(tag1Name);
        const originalIndex2 = this.allTags.indexOf(tag2Name);
        
        if (originalIndex1 !== -1 && originalIndex2 !== -1) {
          // 交换这两个标签在原始数组中的位置
          const temp = this.allTags[originalIndex1];
          this.allTags[originalIndex1] = this.allTags[originalIndex2];
          this.allTags[originalIndex2] = temp;
          
          // 保存到本地存储
          this.saveTags();
          
          // 重新排序标签列表
          this.filteredTags = this.getSortedTags();
        }
      }
      
      this.draggingIndex = -1;
    },
    
    // 获取标签下的内容数量
    getTagItemCount(tagName) {
      return this.messages.filter(message => message.tags.includes(tagName)).length;
    },
    
    // 获取特定标签的所有内容
    getTagContents(tagName) {
      return this.messages.filter(message => message.tags.includes(tagName));
    },
    
    // 查看标签内容
    viewTagContents(tagName) {
      this.selectedTag = tagName;
    },
    
    // 清除选中的标签，返回标签列表
    clearSelectedTag() {
      this.selectedTag = null;
    },
    
    // 保存标签数据
    saveTags() {
      uni.setStorageSync('tags', JSON.stringify(this.allTags));
    },
    
    // 保存消息数据
    saveMessages() {
      uni.setStorageSync('messages', JSON.stringify(this.messages));
    },
    
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
/* 页面容器样式 */
.tags-management-page {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 头部样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  margin-bottom: 30rpx;
}

.back-btn {
  font-size: 36rpx;
  color: #666;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.placeholder {
  width: 60rpx;
}

/* 主内容区域样式 */
.content {
  flex: 1;
}

/* 标签搜索样式 */
.tags-search {
  margin-bottom: 30rpx;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 40rpx;
  padding: 0 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
}

.search-icon {
  font-size: 28rpx;
  color: #999;
  margin-right: 10rpx;
}

.search-input {
  flex: 1;
  height: 70rpx;
  border: none;
  outline: none;
  font-size: 28rpx;
}

.clear-search {
  font-size: 32rpx;
  color: #999;
  padding: 0 10rpx;
}

/* 标签统计信息 */
.tags-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 0 10rpx;
}

.stats-text {
  font-size: 26rpx;
  color: #666;
}

.sort-btn {
  font-size: 26rpx;
  color: #007aff;
}

/* 标签列表样式 */
.tags-list {
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
}

.tag-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
  transition: all 0.3s;
}

.tag-item:last-child {
  border-bottom: none;
}

.tag-item:active {
  background-color: #f5f5f5;
}

/* 拖拽手柄样式 */
.drag-handle {
  color: #ccc;
  font-size: 28rpx;
  padding: 0 10rpx;
  user-select: none;
}

.tag-info {
  display: flex;
  align-items: center;
  gap: 10rpx;
  flex: 1;
}

.tag-name {
  font-size: 28rpx;
  color: #333;
}

.tag-count {
  font-size: 24rpx;
  color: #999;
}

.tag-actions {
  display: flex;
  gap: 15rpx;
}

.edit-btn,
.delete-btn {
  padding: 6rpx 20rpx;
  font-size: 24rpx;
  border-radius: 4rpx;
}

.edit-btn {
  background-color: #007aff;
  color: #fff;
}

.delete-btn {
  background-color: #ff3b30;
  color: #fff;
}

/* 添加标签样式 */
.add-tag-section {
  margin-bottom: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.add-form {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.tag-input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.add-btn {
  width: 100%;
  height: 80rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 10rpx;
  font-size: 28rpx;
}

/* 标签内容样式 */
.tag-contents-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
}

.section-actions {
  margin-bottom: 20rpx;
}

.contents-list {
  margin-top: 20rpx;
}

.content-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-item:last-child {
  border-bottom: none;
}

.content-text {
  font-size: 28rpx;
  flex: 1;
  margin-right: 20rpx;
}

.content-time {
  color: #999;
  font-size: 24rpx;
}

/* 拖拽排序效果 */
.dragging {
  opacity: 0.6;
  background-color: #f0f0f0;
  transform: scale(1.01);
}
</style>